<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画</title>
  <style>
    /*@keyframes	规定动画。
    animation: name duration timing-function delay iteration-count direction fill-mode;
    animation	所有动画属性的简写属性，除了 animation-play-state 属性。
    animation-name	规定 @keyframes 动画的名称。
    animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
    animation-timing-function	规定动画的速度曲线。默认是 "ease"。
    animation-delay	规定动画何时开始。默认是 0。
    animation-iteration-count	规定动画被播放的次数。默认是 1。 infinite	指定动画应该播放无限次（永远） animation-fill-mode 不会生效
    animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。 normal 0-100% reverse从100%-0 alternate   0-100% 100%-0 
    animation-fill-mode: none|forwards|backwards|both|   
    animation-play-state	规定动画是否正在运行或暂停。默认是 "running" 运行。 paused 泡z的, 暂停 ;  */
    div {
      width: 100px;
      height: 100px;
      background: red;
      animation-name: myfirst;
      animation-duration: 5s;
      animation-timing-function: linear;
      animation-delay: 2s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-play-state: running;
    }
    /* 鼠标悬停停止运行 */
    div:hover{
      animation-play-state:paused;
    }

    @keyframes myfirst {
      from {
        background: red;
      }

      to {
        background: yellow;
      }
    }
    </style>
</head>

<body>

  <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

  <div></div>
</body>

</html>